<!DOCTYPE html>
<html lang="ch">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        background: url(./bg.jpg);
        height: 1371px;
        width: 1920px;
        background-size: cover;
        margin: 30px auto;
        position: relative;
      }
      .btn {
        position: absolute;
        top: 600px;
        background-color: #fff;
        cursor: pointer;
        opacity: 50%;
        width: 50px;
        height: 80px;
      }
      .left {
        left: 0;
      }
      .right {
        right: 0;
      }
      .img {
        position: absolute;
        cursor: pointer;
        transition-property: top left;
        transition-duration: 5s;
        width: 125px;
        height: 125px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div id="left" class="left btn"></div>
      <div id="right" class="right btn"></div>
    </div>
    <script>
      const box = document.querySelector(".box")
      let imgs = null
      let str = ""
      let index = 0
      // 状态(0合并. 1分开)
      let status = 0
      // 节流
      let not = 1
      init()

      // 显示隐藏按钮
      function dis() {
        const left = document.getElementById("left")
        const right = document.getElementById("right")
        if (status) {
          left.style.display = "none"
          right.style.display = "none"
          console.log(left)
        } else {
          left.style.display = "block"
          right.style.display = "block"
        }
      }

      // 监听左右按钮
      box.addEventListener("click", (e) => {
        if (!not) return
        not = 0
        setTimeout(() => {
          not = 1
        }, 1500)
        const cla = e.target.classList[0]
        if (cla === "right") {
          col((index + 1) % 24)
          if (status) {
            status = 0
            dis()
          }
        }
        if (cla === "left") {
          if (index === 0) index = 24
          col(index - 1)
          if (status) {
            status = 0
            dis()
          }
        }
      })

      // 创建小块
      function init() {
        let t = 1
        for (let i = 0; i < 4; i++) {
          for (let j = 0; j < 6; j++) {
            str += `<div class="img" style="
              background: url(./${t}.jpg);
              background-size: cover;
              class="img"
            "></div>`
            t++
          }
        }
        box.innerHTML += str
        imgs = document.querySelectorAll(".img")
        part()
        status = 1
        dis()
        imgs.forEach((res, index) => {
          res.onclick = () => {
            if (!not) return
            not = 0
            setTimeout(() => {
              not = 1
            }, 1500)
            if (status === 0) {
              part()
              status = 1
              dis()
            } else {
              col(index)
              status = 0
              dis()
            }
          }
        })
      }

      // 分开
      function part() {
        console.log("分开")
        let t = 0
        for (let i = 0; i < 4; i++) {
          for (let j = 0; j < 6; j++) {
            let rotate = Math.random() * 90
            imgs[t].style.border = `1px solid #000`
            imgs[t].style.left = `${j * 300 + 140}px`
            imgs[t].style.top = `${i * 350 + 80}px`
            imgs[t].style.transform = `rotate(${rotate}deg)`
            imgs[t].style.background = `url(./${t + 1}.jpg)`
            t++
          }
        }
      }

      // 合并
      function col(e) {
        console.log("合并")
        let t = 0
        for (let i = 0; i < 4; i++) {
          for (let j = 0; j < 6; j++) {
            imgs[t].style.transform = "rotate(0deg) scale(3)"
            imgs[t].style.border = `none`
            imgs[t].style.top = `${i * 125 + 440}px`
            imgs[t].style.left = `${j * 125 + 600}px`
            imgs[t].style.background = `url(./big/${e + 1}.jpg)`
            imgs[t].style["transition-delay"] = `${(i + j) * 0.1}s`
            imgs[t].style["background-size"] = ""
            imgs[t].style["background-position"] = `-${j * 125}px -${i * 125}px`
            t++
          }
        }
        setTimeout(() => {
          let t = 0
          for (let i = 0; i < 4; i++) {
            for (let j = 0; j < 6; j++) {
              imgs[t].style.transform = "rotate(0deg) scale(1)"
              t++
            }
          }
        }, 1000)
        index = e
      }
    </script>
  </body>
</html>
